@model IEnumerable<Equinox.Application.ViewModels.CustomerViewModel>

@{
    ViewData["Title"] = "Customer Management";
}

<style>
    .modal-lg {
        max-width: 80%;
    }
</style>

<div>
    <h2>@ViewData["Title"]</h2>
</div>
<hr />

<div class="row">
    <div class="col-md-12">
        <div>
            <div class="pull-left">
                <a asp-action="Create" class="btn btn-primary">
                    <span title="Register New" class="fas fa-plus"></span> Register New
                </a>
            </div>
        </div>
    </div>
</div>
<br />

<div class="panel panel-default">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.BirthDate)
            </th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.BirthDate)
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.Id" title="Edit" class="btn btn-warning">
                        <span class="fas fa-edit"></span>
                    </a>
                        
                    <a asp-action="Details" asp-route-id="@item.Id" title="Details" class="btn btn-primary">
                        <span class="fas fa-search"></span>
                    </a>
                        
                    <a asp-action="Delete" asp-route-id="@item.Id" title="Delete" class="btn btn-danger">
                        <span class="fas fa-trash-alt"></span>
                    </a>
                    
                    <button type="button" class="btn btn-info viewbutton" title="History" data-id="@item.Id" data-toggle="modal" data-target="#customerHistory">
                        <span class="fas fa-clock"></span>
                    </button>
                </td>
            </tr>
        }
        </tbody>
    </table>
</div>

<div class="modal fade" id="customerHistory" tabindex="-1" role="dialog" aria-labelledby="historyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="historyModalLabel">Customer Data History</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="customerHistoryData"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    <script type="text/javascript">
        $(".viewbutton").on("click", function() {
            var customerId = $(this).data('id');
            $.ajax({
                url: "/customer-management/customer-history/" + customerId,
                //url: "http://equinoxproject.azurewebsites.net/customer-management/customer-history/" + customerId,
                cache: false
            }).done(function(data) {
                var formatHtml = "<table class='table table-striped'>";
                formatHtml += "<thead><th>Action</th><th>When</th><th>Id</th><th>Name</th><th>E-mail</th><th>Birth Date</th><th>By User</th></thead>";

                for (var i = 0; i < data.length; i++) {
                    var change = data[i];
                    formatHtml += "<tr>";
                    formatHtml += "<td>" + change.action + "</td>";
                    formatHtml += "<td>" + change.timestamp + "</td>";
                    formatHtml += "<td>" + change.id + "</td>";
                    formatHtml += "<td>" + change.name + "</td>";
                    formatHtml += "<td>" + change.email + "</td>";
                    formatHtml += "<td>" + change.birthDate + "</td>";
                    formatHtml += "<td>" + change.who + "</td>";
                    formatHtml += "</tr>";
                }
                formatHtml += "</table>";
                $("#customerHistoryData").html(formatHtml);
            });
        });
</script>
}
